<template>
  <div class="box-main1">
    <div class="box-header2">
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/admin/index' }">控制台</el-breadcrumb-item>
        <el-breadcrumb-item>英语单词阅读</el-breadcrumb-item>
      </el-breadcrumb>
    </div>

    <div class="box-main2">

      <div class="box-search2">
        <div class="box-input2" style="width: 180px">
          <el-input  @keydown.enter.native="clkBtnSearch" @clear="clkBtnSearch" clearable
                     size="mini" v-model="searchInfo.searchKey" placeholder="英文/中文"></el-input>
        </div>

        <div class="box-input2">
          <el-button size="mini" type="primary" icon="el-icon-search" @click="clkBtnSearch">搜索</el-button>
        </div>

      </div>
      <div class="box-content2">
        <div class="box-line1">
          <div class="box-words">
            <div class="box-word-out" v-for="(ew,noid) in englishWordPage.list">
              <div class="box-word-out2">
                  <div class="box-word-in box-word-english">{{ew.english_word}}</div>
                <el-tooltip placement="top">
                  <div slot="content">{{ew.chinese}}</div>
                  <div class="box-word-in box-word-chinese">{{ew.chinese}}</div>
                </el-tooltip>
              </div>
            </div>
          </div>
        </div>
        <div class="box-page2">
          <el-pagination layout="prev, pager, next" :total="englishWordPage.total"
                         :current-page="englishWordPage.pageNum" :page-size="englishWordPage.pageSize" @current-change="chgCurrPage">
          </el-pagination>
        </div>
      </div>
    </div>

  </div>
</template>

<script>
  import request from '@/common/utils/request';

  export default {
    computed: {
      loginUserInfo() {
        return this.$store.state.loginUserInfo;
      },

    },
    data() {
      return {
        searchInfo: {searchKey: null},
        englishWordPage: {pageSize: 50, pageNum: 1 , list: []},
        pageLoading: false,
        showEnglishWordDialog: false,
        englishWord: {},

      };
    },
    mounted() {
      this._initData();
    },
    watch: {
      $route: {
        handler: function (to, from) {
          if (to.path == '/admin/english_word_show') {
            this.getList();
          }

        }, immediate: true
      },
    },
    methods: {
      _initData() {
        this.getList();
      },

      clkBtnSearch() {
        this.getList();
      },
      chgCurrPage(val){
        this.englishWordPage.pageNum = val;
        this.getPage();
      },
      getPage(){
        this.getList();
      },
      getList() {
        let url1 = this.settings.apiUrl + '/english_word/page';
        let d1 = {pageNum: this.englishWordPage.pageNum, pageSize: this.englishWordPage.pageSize};
        d1.searchKey = this.searchInfo.searchKey;

        for(let i = 0;i<50;i++)
        this.englishWordPage.list.push({});

        request.post(url1, d1).then((d1r) => {
          this.pageLoading = false;
          if (d1r.code === 0) {
            this.englishWordPage = d1r.data;
          } else {

            this.$alert('获取英语单词信息失败：' + d1r.msg, '提示', {
              type: 'warning'
            });

          }
        }).catch(err => {
          this.pageLoading = false;
        });
      },

    }

  };
</script>

<style lang="scss" scoped="scoped">

  .box-main2 {
    height: 100%;
    background-repeat: no-repeat;
    background-size: cover;
  }

  .box-header2{
    height: 30px;
    background-color: #eceeef;
    padding-left:20px;
    padding-top:8px;

  }

  .box-search2{
    display: flex;
  }
  .box-page2{
    display: flex;
    justify-content: flex-end;
  }

  .box-search2{
    padding-bottom: 10px;
    .box-input2{
      padding-right:10px;
    }
  }

  .box-words{
    display: flex;
    flex-wrap: wrap;
    .box-word-out{
      padding:1px;

    }
    .box-word-out2{
      display: flex;
      width: 240px;

      background-color: #8cc5ff;
    }
    .box-word-in.box-word-english{
      width: 100px;
      text-align: right;
      padding-right:5px;
      padding-top:5px;
      padding-bottom:5px;
      background-color: #5daf34;
    }
    .box-word-in.box-word-chinese{
      flex: 1;
      padding-top:5px;
      padding-bottom:5px;
      padding-left:5px;
      text-overflow: ellipsis;
      overflow:hidden;
      white-space:nowrap;
    }
  }


</style>
